<template>
<div>
<div class="page-content">
    <div class="page-view">
        <div class="market">
            <div class="btn-tab">
                <router-link :to="{name:'trade_market'}" class="button" v-bind:class="{'active':select_tab=='trade_market'}" v-on:click="sel_page('trade_market')">行情</router-link>
                <router-link :to="{name:'trade_trade'}" class="button" v-bind:class="{'active':select_tab=='trade_trade'}" v-on:click="sel_page('trade_trade')" >交易</router-link>
                <router-link :to="{name:'trade_order'}" class="button" v-bind:class="{'active':select_tab=='trade_order'}" v-on:click="sel_page('trade_order')">当前委托</router-link>
                <router-link :to="{name:'trade_history'}" class="button" v-bind:class="{'active':select_tab=='trade_history'}" v-on:click="sel_page('trade_history')">历史委托</router-link>
            </div>
            <transition :name="transitionName">
            <router-view class="view"></router-view>
            </transition>
        </div>
    </div>
</div>

<div class="app_menu">
    <my-menu></my-menu>
</div>

</div>

</template>
<script>

import '@/components/common/menu.js'

export default {
    name: 'trade',
    //delimiters:['{!', '!}'],
    //props:['coin_type', 'use_coin_type'],
    data() {
        return {
            select_tab:'trade',
            transitionName: 'slide-left',
            coin_type : 'btc',
            use_coin_type : 'bitcny'
        }
    },
    created:function () {
        console.log(this.$route.name)
        this.select_tab=this.$route.name;
        if ( ! this.coin_type) {
            this.coin_type = 'btc'
            this.use_coin_type = 'bitcny'
        }
    },
    methods:{
        sel_page:function (page) {
            this.select_tab=page;
            //console.log(page);
        },

    },
    watch: {
        // todo 通过route参数来,from to 都有一个值，直接大小判断
        '$route':function(to, from) {
            console.log(to,from);
            const toDepth = to.path.split('/').length;
            const fromDepth = from.path.split('/').length;
            //console.log(toDepth,fromDepth);
            this.sel_page(to.name);
            if(from.name=='trade_market') {
                this.transitionName='slide-left';
            } else if(from.name=='trade_trade') {
                if(to.name=='trade_market'){
                    this.transitionName='slide-right';
                }else {
                    this.transitionName='slide-left';
                }
                }else if(from.name=='trade_order'){
                    this.transitionName='slide-right';
                }
                //this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
                //console.log(this.transitionName);
            }
        }
    }
</script>
<style>

.view {
    position: absolute;
    transition: all .8s cubic-bezier(.55,0,.1,1);
    width: 100%;
    height: calc(100% - 1.75rem);
        }
        .slide-left-enter, .slide-right-leave-active {
            opacity: 0;
            -webkit-transform: translate(30px, 0);
            transform: translate(30px, 0);
        }
        .slide-left-leave-active, .slide-right-enter {
            opacity: 0;
            -webkit-transform: translate(-30px, 0);
            transform: translate(-30px, 0);
        }
</style>

